<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文本框特效</title>
	</head>
	<body>
	邮箱:<input type="text" id="emi" value="请输入邮箱" style="outline: none;"><span id="tishi"></span>
	<script type="text/javascript">
//		1.获取节点
		var emi = document.getElementById("emi");
		var tishi = document.getElementById("tishi");
		//console.log(emi);//检测节点是否被获取
		//一.获取焦点时清空初始值，边框变红色
		 emi.onfocus = function (){
		 	if(emi.value == "请输入邮箱"){
		 	emi.value = "";
		 	emi.style.border = "1px solid red";
//		 	emi.style.borderColor = "red";
		 	}
		tishi.style.backgroundColor = "aquamarine";
		tishi.innerHTML = "请输入邮箱哦 亲";
		 }//获取焦点的事件的结束符
		 //二.失去焦点,验证邮箱是否有效,无效时自动选中,高度提示,提示用户重新输入
		 emi.onblur =function(){
		 	if(emi.value == "" || emi.value.indexOf("@") == -1 || emi.value.indexOf(".") == -1){
		 		emi.focus();
		 		emi.select();
		 		alert("请重新输入邮箱");
		 	}else{
		 		tishi.innerHTML ="邮箱ok";
		 	}
		 }//失去焦点事件的结束符
	</script>
	</body>
</html>
